
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>
	
		<div class="nav-container">
			<nav class="nav-1">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<a href="index.html" class="home-link">
								<img alt="Logo" class="logo" src="img/logo-square-light.png">
							</a>
							<ul class="menu">
								<li class="has-dropdown"><a href="#">Home</a>
									<ul class="subnav">
										<li><a href="index.html">Classic Home</a></li>
										<li><a href="home-2.html">Startup</a></li>
										<li><a href="home-3.html">Rustic</a></li>
										<li><a href="home-4.html">Agency</a></li>
										<li><a href="home-5.html">One Page</a></li>
										<li><a href="home-6.html">Personal</a></li>
										<li><a href="home-7.html">Landing</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Pages</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">About</a>
											<ul class="subnav-level-2">
												<li><a href="about-1.html">About 1</a></li>
												<li><a href="about-2.html">About 2</a></li>
												<li><a href="about-3.html">About 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Services</a>
											<ul class="subnav-level-2">
												<li><a href="services-1.html">Services 1</a></li>
												<li><a href="services-2.html">Services 2</a></li>
												<li><a href="services-3.html">Services 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Coming Soon</a>
											<ul class="subnav-level-2">
												<li><a href="coming-soon-1.html">Coming Soon 1</a></li>
												<li><a href="coming-soon-2.html">Coming Soon 2</a></li>
											</ul>
										</li>
										<li><a href="404.html">404 Error</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Blog</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Post Pages</a>
											<ul class="subnav-level-2">
												<li><a href="blog-1.html">Grid</a></li>
												<li><a href="blog-2.html">Grid Sidebar</a></li>
												<li><a href="blog-3.html">Image</a></li>
												<li><a href="blog-4.html">Image Sidebar</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Articles</a>
											<ul class="subnav-level-2">
												<li><a href="article-1.html">Article</a></li>
												<li><a href="article-2.html">Article Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Work</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Projects</a>
											<ul class="subnav-level-2">
												<li><a href="work-1.html">Filter Grid</a></li>
												<li><a href="work-2.html">Large Grid</a></li>
											</ul>
										</li>
										<li><a href="work-single-1.html">Single</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Shop</a>
									<ul class="subnav">
										<li><a href="shop-1.html">Products Grid</a></li>
										<li><a href="product-1.html">Single Product</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Contact</a>
									<ul class="subnav">
										<li><a href="contact-1.html">Project Planner</a></li>
										<li><a href="contact-2.html">Map & Instagram</a></li>
										<li><a href="contact-3.html">Simple Form</a></li>
									</ul>
								</li>
							</ul>
							
							<ul class="social-links">
								<li><a href="#"><i class="ti ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
							</ul>
						
							<div class="nav-functions">
						
								<div class="search-bar">
									<form class="search">
										<input type="text" placeholder="" name="search">
										<input type="submit" value="">
										<i class="pe-7s-search"></i>
									</form>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="mobile-toggle">
					<div class="bar-1"></div>
					<div class="bar-2"></div>
				</div>
			</nav>
		</div>
		
		<div class="main-container">
					
			<section class="hero-slider large-image fixed-header restrict-hero-height">
				<ul class="slides">
					<li>
						<div class="background-image-holder">
							<img alt="Slide Background" class="background-image" src="img/hero24.jpg">
						</div>
		
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">Don't just build. Create.</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li>
		
					<li>
						<div class="background-image-holder">
							<img alt="Slide Background" class="background-image" src="img/hero27.jpg">
						</div>
		
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">Make it yours with Variant.</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li><li>
						<div class="background-image-holder overlay">
							<img alt="Slide Background" class="background-image" src="img/hero28.jpg">
						</div>
		
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">Design with clarity &amp; purpose.</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li>
				</ul>
			</section>
			
			<section class="large-pad">
				<div class="container">
					<div class="row">
						<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
							<p class="super-lead">
								Machine is the distillation of our vision to deliver a truly premium experience to web professionals and newcomers alike. Taking cues from the contemporary and authentic, Machine assembles the best of the modern web in one remarkable template.  
							</p>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="image-block">
				<div class="container">
					<div class="row">
						<div class="col-md-5 col-sm-7">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>Delivering ideas + innovation</h5>
								<h4>Your ambitious ideas<br> Our unwavering passion</h4>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
								</p>
								<span class="uppercase">We do things a little differently</span>
								<p>
									Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
								</p>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="image-holder col-md-6 col-sm-4 pull-right">
					<div class="background-image-holder">
						<img alt="Slide Background" class="background-image" src="img/hero3.jpg">
					</div>
				</div>
			
			</section>
			
			<section class="action-strip-1">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<span class="alt-font">Ready to get started?</span>
							<span class="title">We're ready to help</span>
							<i class="icon pe-7s-look"></i>
							<a class="text-link" href="contact-1.html" target="_self">Start a project with us <i class="icon ti ti-arrow-right arrow_right"></i></a>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="no-pad fullscreen-projects">
		
				<div class="project col-sm-6 image-holder">
					<div class="background-image-holder">
						<img alt="Project Image" class="background-image" src="img/work2.jpg">
					</div>
					<div class="hover-state text-center">
						<a href="#" class="vertical-align">
							<div class="hover-content">
								<div class="detail-line"></div>
								<h5 class="text-white">The Spice People</h5>
								<h4 class="text-white">A spicy rebranding<br> for this San Fran icon</h4>
								<i class="icon ti ti-arrow-right arrow_right"></i>
							</div>
						</a>
					</div>
				</div><!--end of inidividual project-->
			
				<div class="project col-sm-6 image-holder">
					<div class="background-image-holder">
						<img alt="Project Image" class="background-image" src="img/work1.jpg">
					</div>
					<div class="hover-state text-center">
						<a href="#" class="vertical-align">
							<div class="hover-content">
								<div class="detail-line"></div>
								<h5 class="text-white">Fit For Life</h5>
								<h4 class="text-white">A positive new image<br> for this fitness startup</h4>
								<i class="icon ti ti-arrow-right arrow_right"></i>
							</div>
						</a>
					</div>
				</div><!--end of inidividual project-->
			
			</section>
			
			<section class="action-strip-2">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<h2>Fire your text editor.</h2>
							<a class="btn" href="http://machine.mediumra.re/variant/builder.html">Build with Variant</a>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="blog-snippets-1">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>Latest Blog Posts</h5>
								
							</div>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-md-4 col-sm-6">
							<div class="blog-snippet-1">
								<span class="date alt-font uppercase">November 6th 2014</span>
								<h5>The ultimate guide on how to<br> build your own website.</h5>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
								</p>
								<a class="text-link" href="#">Read the rest<i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div><!--end of individual blog snippet-->
					
						<div class="col-md-4 col-sm-6">
							<div class="blog-snippet-1">
								<span class="date alt-font uppercase">October 31st 2014</span>
								<h5>An interesting new way to handle<br> vertical media queries.</h5>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
								</p>
								<a class="text-link" href="#">Read the rest<i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div><!--end of individual blog snippet-->
					
						<div class="col-md-4 col-sm-6">
							<div class="blog-snippet-1 image-snippet overlay">
						
								<div class="background-image-holder">
									<img alt="Slide Background" class="background-image" src="img/blog-square1.jpg">
								</div>
						
								<span class="date alt-font uppercase">October 25th 2014</span>
								<h5>Why getting away from the screen<br> is as good as a holiday.</h5>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
								</p>
								<a class="text-link" href="#">Read the rest<i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div><!--end of individual blog snippet-->
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			<footer class="footer-6">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-md-offset-1 col-sm-6">
							<a href="#">
								<img class="logo" alt="logo" src="img/logo-square-light.png">
							</a>
							<p>
								300 Collins St.<br> 
								Suite 2A<br>  
								Melbourne, 3000
							</p>
							<p>
								P: +6148 3847 382<br>
								E: hello@machine.net
							</p>
						</div>
					
						<div class="col-md-4 col-sm-6">
							<h5>Twitter</h5>
							<div class="twitter-feed">
								<div class="tweets-feed" data-widget-id="492085717044981760">
							
								</div>
							</div>
						</div>
					
						<div class="col-md-2 col-md-offset-1 col-sm-12">
							<h5>Navigate</h5>
							<ul class="link-list">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Our Work</a></li>
								<li><a href="#">Journal</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
				
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-sm-12">
							<div class="footer-lower">
								<span>© Copyright 2014 Medium Rare, All Rights Reserved</span>
								<ul class="social-links">
									<li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
	
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				
				</div><!--end of container-->	
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>


        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/parallax.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				